import { Tabs, TabItem } from '@aws-amplify/ui-react';
import { Fragment } from '@/components/Fragment';
import { TerminalCommand } from '@/components/InstallScripts';

### Fonts

By default, Amplify UI does not bundle a font so that you can choose which font to use in your application and how you want to load the font. The default theme references the Inter font because it works well for UI design and is offered as a [variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide). The easiest way to add the Inter font to your application is to use the Google Fonts CDN:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap"
  rel="stylesheet"
/>
```

or

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');
```

You can also install it as an NPM dependency:

<Tabs>
<TabItem title="npm">

<TerminalCommand command="npm install @fontsource/inter" />

</TabItem>
<TabItem title="yarn">

<TerminalCommand command="yarn add @fontsource/inter" />

</TabItem>
</Tabs>

Then import the variable font in your application:

```javascript
import '@fontsource/inter/variable.css';
```

Check out [Fontsource](https://fontsource.org/) for more information and documentation on this library.

If you want to enable [OpenType features](https://rsms.me/inter/#features) like alternative styles, you can use the font directly from the creator's website: https://rsms.me/inter/

```css
@import url('https://rsms.me/inter/inter.css');

html {
  /* this enables some alternative styles and contextual characters to the font */
  font-feature-settings: 'ss01', 'ss02', 'case', 'salt';
}
```